<template>
    <div><br><br>
        <div class="ms-login">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
                <el-form-item prop="name" label="菜单名称">
                    <el-input v-model="ruleForm.menu_name" placeholder="菜单名称"></el-input>
                </el-form-item>
                <el-form-item prop="is_menu">
                    <el-radio v-model="ruleForm.is_menu" label="0">菜单</el-radio>
                    <el-radio v-model="ruleForm.is_menu" label="1">按钮</el-radio>
                </el-form-item>
                <template v-if="ruleForm.is_menu==='0'">
                    <el-form-item prop="url">
                        <el-input v-model="ruleForm.url" placeholder="跳转地址"></el-input>
                    </el-form-item>
                </template>
                <el-form-item prop="icon">
                    <el-input type="text" placeholder="图标" v-model="ruleForm.icon"
                              @keyup.enter.native="submitForm('ruleForm')"></el-input>
                </el-form-item>
                <el-form-item prop="sort">
                    <el-input v-model="ruleForm.sort" placeholder="排序数"></el-input>
                </el-form-item>
                <div class="login-btn" style="margin-left: 80px;">
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button type="default" @click="cancel">取消</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    menu_name: '',
                    url: '',
                    is_menu: '0',
                    icon: '',
                    sort: 99,
                },
                rules: {
                    menu_name: [
                        {required: true, message: '请输入菜单名称', trigger: 'blur'}
                    ],
                    url: [
                        {required: true, message: '请输入跳转路由', trigger: 'blur'}
                    ],
                    sort: [
                        {required: true, message: '请输入排序数', trigger: 'blur'}
                    ],
                }
            }
        },
        props: ["treeData"],
        methods: {
            // 这个方法被父级组件调用
            treeClick(data){
                console.log(data)
                this.ruleForm = data;
            },
            submitForm(formName) {
                const self = this;
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addTree();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 添加菜单
            addTree(){
                let url = '';
                let obj = {
                    'menuApp.id': this.ruleForm.id,
                    'menuApp.pid': this.ruleForm.par==='0'?this.ruleForm.pid:this.ruleForm.id,
                    'menuApp.menu_name': this.ruleForm.menu_name,
                    'menuApp.url': this.ruleForm.url,
                    'menuApp.icon': this.ruleForm.icon || '',
                    'menuApp.is_menu': this.ruleForm.is_menu,
                    'menuApp.sort': this.ruleForm.sort,
                };
                if(this.ruleForm.par==='2'){
                    url = '/admin/manager/appMenu/update';
                    obj['menu.pid'] = this.ruleForm.pid;
                }else{
                    url = '/admin/manager/appMenu/add';
                    obj['menu.pid'] = this.ruleForm.par==='0'?this.ruleForm.pid:this.ruleForm.id;
                }
                this.config.post2(url, obj).then(res=>{
                    if(res.data.code==='0'){
                        this.$emit('chang', res.data.message);
                    }else{
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            // 取消
            cancel(){
                this.$emit('chang', '取消');
            },
        },
        mounted(){
        }
    }
</script>

<style scoped>
    .ms-login{
        width: 60%;
        margin: 0 auto;
    }
</style>
